@import "./../theme";
@import "./../var";

$header-height: 1.8rem;
.center-container {
  border-left: 1px solid $borderColorPrimary;
  border-right: 1px solid $borderColorPrimary;

  .btn-bar {
    background: $tableHeaderBgColor;
    height: $header-height !important;
    line-height: $header-height !important;
    font-size: $fontSizeLarge;
    box-shadow: $headerShadow;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 $paddingHorizontal !important;
    user-select: none;

    &.el-header {
      padding: 0 $paddingHorizontal;
    }

    .flex-spacing {
      flex: 1;
    }

    .btn-divider {
      height: $header-height;
      display: inline-block;
      width: 1px;
      background: $bodyBgColor;
      margin: 15px;
    }

    .btn-bar-action {
      height: $header-height;
      line-height: $header-height;
      font-size: $fontSizeLarge;
      display: inline-flex;
      align-items: center;

      .el-button {
        height: $header-height;
        color: $colorInfo;
        display: inline-block;
        text-align: center;
        line-height: $header-height;
        border-radius: $radiusSmall !important;
        cursor: pointer;
        padding: 0 0.3rem;
        margin: 0 !important;

        &.btn-step-control {
          margin: 0 0.3rem !important;
        }

        &:hover {
          color: $colorTextPrimary;
          background: $borderColorPrimary;
        }

        &:active {
          background: $borderColorPrimary;
          color: $colorPrimary;
        }

        &.disabled {
          color: lighten($colorTextSecondary, 10%);
          cursor: not-allowed;
        }
      }
    }

    .btn-bar-plat {
      height: 100%;
      line-height: 100%;
      font-size: $fontSizeLarge;
      display: inline-block;

      a {
        width: $header-height;
        height: $header-height;
        color: $colorInfo;
        display: inline-block;
        text-align: center;
        line-height: $header-height;
        border-radius: $radiusRegular;
        margin-right: 5px;
        cursor: pointer;

        &.hover {
          background: $borderColorPrimary;
        }

        .btn-platform {
          width: $header-height;
          height: $header-height;
          background-position: center;
          background-repeat: no-repeat;
        }

        .btn-platform-pc {
          background-image: url("./../../images/pc_mode.svg");
        }

        .btn-platform-pad {
          background-image: url("./../../images/pad_mode.svg");
        }

        .btn-platform-mobile {
          background-image: url("./../../images/mobile_mode.svg");
        }

        &.active {
          .btn-platform-pc {
            background-image: url("./../../images/pc_mode_active.svg");
          }

          .btn-platform-pad {
            background-image: url("./../../images/pad_mode_active.svg");
          }

          .btn-platform-mobile {
            background-image: url("./../../images/mobile_mode_active.svg");
          }
        }
      }
    }
  }

  .el-main {
    padding: 0 !important;
    position: relative;
    background: $bodyBgColor;
  }
}

